<!--  -->
<template>
  <el-form label-width="20px"
           label-position="top"
           class="custom-css-switch-close">
    <el-form-item label="Please provide the feedback about the reason that you turned off the bot:">
      <!-- <el-form label-width="20px">
        <el-form-item v-for="(item, index) in condition"
                      :key="index"
                      style="margin-bottom:0;">
          <el-checkbox v-model="dataForm.reasonType"
                    :label="item.dictValue">{{ item.dictLabel }}</el-checkbox>
          <el-input v-if="item.dictValue === '4' && dataForm.reasonType === item.dictValue"
                    v-model="dataForm.remark"
                    type="textarea"
                    :rows="3"
                    :maxlength="120"
                    show-word-limit
                    style="margin-left:24px;width:calc(100% - 24px)"></el-input>
        </el-form-item>
      </el-form> -->
      <el-checkbox-group v-model="dataForm.reasonType">
        <el-checkbox v-for="(item, index) in condition"
                     :key="index"
                     :label="item.dictValue"
                     style="display:block;">{{ item.dictLabel }}</el-checkbox>
        <el-input v-if="dataForm.reasonType.includes('4')"
                  v-model="dataForm.remark"
                  type="textarea"
                  :rows="3"
                  show-word-limit
                  style="margin-left:24px;width:calc(100% - 24px)"></el-input>
      </el-checkbox-group>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        reasonType: [],
        remark: null
      }
    }
  },
  computed: {
    condition () {
      return window.SITE_CONFIG['dictList'].find(e => e.dictType === 'bot_swtich_tips').dataList
    }
  },
  methods: {
    getDataForm () {
      return {
        reasonLabel: this.filterCondition(this.dataForm.reasonType, 'dictLabel'), // this.condition.filter(e => this.dataForm.reasonType.includes(e.dictValue)).dictLabel,
        dictId: this.filterCondition(this.dataForm.reasonType, 'id'), // this.condition.filter(e => this.dataForm.reasonType.includes(e.dictValue)).id,
        ...this.dataForm
      }
    },
    clearData () {
      Object.assign(this.$data, this.$options.data())
    },
    filterCondition (valueList, key) {
      let temp = this.condition.filter(e => valueList.includes(e.dictValue))
      if (key) {
        let last = []
        for (let i = 0; i < temp.length; i++) {
          last.push(temp[i][key])
        }
        return last
      } else {
        return temp
      }
    }
  }
}
</script>

<style lang='scss'>
.custom-css-switch-close {
  .el-form-item__label {
    line-height: 20px;
  }
}
</style>
